<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="CSS/index.css">
    <title></title>
</head>

<body>
    <!-- 加载动画 -->
    <div class="loading">
        <div class="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="contain" style="display: none">
        <!-- 顶部按钮 -->
        <div id="btn_top"><button>&#xf016f;</button></div>
        <!-- 1. 头部介绍 -->
        <header>
            <div class="header">
                <!-- 头像 -->
                <div class="logo">
                    <div class="img"><img src="images/微信图片_20230315170802.jpg" alt=""></div>
                    <h3>林 泓 杰</h3>
                    <p>一个普通的打工人</p>
                    <a href="javascript:void(0)">2634635543@qq.com</a>
                </div>
            </div>
        </header>
        <!-- 导航条 -->
        <div class="header_nav">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                        <ul class="navbar-nav ">
                            <li class="nav-item ">
                                <a class="nav-link active" href="javascript:void(0)">HTML/CSS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0)">JS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0)">jQuery</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0)">CSS3/HTML5</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0)">Bootstrap / ECharts</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0)">Vue</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

        <!-- 2. CSS/HTML 部分-->
        <section class="csshtml_works pt pb">
            <div class="container">
                <!-- 座右铭 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="motto">
                            <p>在学习上不肯钻研的人是不会提出问题的, 在事业上缺乏突破力的人是不会有所创新的！</p>
                        </div>
                    </div>
                </div>
                <!-- 作品展示 -->
                <div class="row">
                    <!-- HTML/CSS -->
                    <div class="col-md-12">
                        <!-- 标题 -->
                        <div class="title">
                            <h3><span>HTML / CSS</span></h3>
                        </div>
                    </div>
                    <!-- HTML/CSS 项目 -->
                    <div class="col-md-12 mt">
                        <div class="card card_">
                            <a href="./项目/酷站案例/index.html"><img src="./images/站酷.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title">仿站酷</h5>
                                <p class="card-text">站酷ZCOOL-设计师互动平台-打开站酷，发现更好的设计！</p>
                            </div>
                        </div>
                    </div>
                </div>
        </section>

        <!-- 3. JS部分 -->
        <section class="js_works pb">
            <div class="container">
                <!-- 作品展示 -->
                <div class="row">
                    <!-- HTML/CSS -->
                    <div class="col-md-12">
                        <!-- 标题 -->
                        <div class="title">
                            <h3><span> JS </span></h3>
                        </div>
                    </div>
                    <!-- HTML/CSS 项目 -->
                    <div class="col-md-6 mt">
                        <div class="card card_" style="padding-bottom: 8px">
                            <a href="./项目/拉萨手风琴/手风琴.html"><img src="./images/手风琴.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title">手风琴效果</h5>
                                <p class="card-text">......</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt">
                        <div class="card card_">
                            <a href="./项目/仿京东放大镜素材/index.html"><img src="./images/京东放大镜.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title">仿京东放大镜效果</h5>
                                <p class="card-text">......</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt">
                        <div class="card card_">
                            <a href="./项目/刻晴拼图/刻晴.html"><img src="./images/刻晴.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title" style="margin-top: 15px">刻晴拼图</h5>
                                <p class="card-text">......</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt">
                        <div class="card card_">
                            <a href="./项目/王者选项卡/index.html"><img src="./images/王者选项卡.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title">王者选项卡</h5>
                                <p class="card-text">......</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 4. JQ部分 -->
        <section class="jq_works pb">
            <div class="container">
                <!-- 作品展示 -->
                <div class="row">
                    <!-- HTML/CSS -->
                    <div class="col-md-12">
                        <!-- 标题 -->
                        <div class="title">
                            <h3><span> jQuery </span></h3>
                        </div>
                    </div>
                    <!-- HTML/CSS 项目 -->
                    <div class="col-md-6 mt">
                        <div class="card card_">
                            <a href="./项目/音乐播放器案例/index.html"><img src="./images/音乐播放器.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title" style="margin-top: 35px;">音乐播放器</h5>
                                <p class="card-text">......</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt">
                        <div class="card card_">
                            <a href="./项目/哔哩哔哩漫画分类效果/index.html"><img src="./images/Ajax哔站漫画.png" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title">jQuery + Ajax哔站漫画</h5>
                                <p class="card-text">......</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 5. CSS3 / HTML5 部分 -->
        <section class="c3h5_works pb">
            <div class="container">
                <!-- 作品展示 -->
                <div class="row">
                    <!-- HTML/CSS -->
                    <div class="col-md-12">
                        <!-- 标题 -->
                        <div class="title">
                            <h3><span> CSS3 / HTML5 </span></h3>
                        </div>
                    </div>
                    <!-- HTML/CSS 项目 -->
                    <div class="col-md-6 mt">
                        <div class="card card_">
                            <a href="./项目/井盖 颜色渐变/井盖.html"><img src="./images/井盖 颜色渐变.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title">井盖 颜色渐变</h5>
                                <p class="card-text ">......</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt">
                        <div class="card card_">
                            <a href="./项目/动态注册页面/index.html"><img src="./images/登录.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title" style="padding-top: 15px;">动态登录注册</h5>
                                <p class="card-text ">......</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 6. Bootstarp 部分 -->
        <section class="bootstarp_works pb">
            <div class="container">
                <!-- 作品展示 -->
                <div class="row">
                    <!-- HTML/CSS -->
                    <div class="col-md-12">
                        <!-- 标题 -->
                        <div class="title">
                            <h3><span> Bootstrap / ECharts </span></h3>
                        </div>
                    </div>
                    <!-- HTML/CSS 项目 -->
                    <div class="col-md-6 mt">
                        <div class="card card_">
                            <a href="./项目/旅游响应式（bs）案例/index.html"><img src="./images/Bootstrap 旅游.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title">Bootstarp 旅游</h5>
                                <p class="card-text ">......</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt">
                        <div class="card card_" style="padding-bottom: 4px;">
                            <a href="./项目/数据可视化/数据可视化.html"><img src="./images/数据可视化.jpg" class="card-img-top" alt="..."></a>
                            <div class="card-body">
                                <h5 class="card-title">ECharts 数据可视化</h5>
                                <p class="card-text ">......</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        </div>

        <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js " integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj " crossorigin="anonymous "></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js " integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct " crossorigin="anonymous "></script>


</body>

</html>